<template>
    <div class="login">
        <!-- <img src="http://example.kkslide.fun/aaa.gif" class="login_gif"/> -->
        <img src="../../../static/images/aaa/aaa.gif" class="login_gif"/>
        <div class="login_box">
            <div class="login_logo">
                <div class="login_title">餐饮油烟大管家</div>
                <div class="login_sub_title">CATERING LAMPBLACK BUTLER</div>
            </div>
            <form @submit="login">
                <input
                    type="text"
                    name="account"
                    placeholder="请输入您的账号"
                    v-model="account"
                    autofocus
                />
                <input
                    type="password"
                    name="pwd"
                    placeholder="请输入您的密码"
                    v-model="pwd"
                />
                <input type="submit" value="登陆" />
            </form>
        </div>
        <div class="login_footer">
            <p>
                <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18051891号 </a>
                <span>Copyright</span>
                <a href="http://www.hzy-sz.com" target="_blank">©衡智远科技（深圳）有限公司</a>
            </p>
        </div>
        <div class="login_success_tip" ref="login_tip" v-show="islogin">
            登陆成功!
        </div>
    </div>
</template>

<script>
import { setCookie, getCookie } from '../../js/utils'
import {login,isLogin } from '@/api/api.js'
export default {
    data () {
        return {
            account: "",
            pwd: "",
            islogin:false
        }
    },
    methods: {
        login (e) {
            e.preventDefault()
            login({
                    account: this.account,
                    pwd: this.pwd
            }).then(res => {
                if (res.status == 200 && res.data.code == 2000) {
                    setCookie('token', res.data.data, 1)
                    // alert("登陆成功!")
                    this.islogin=true
                    localStorage.setItem('token',res.data.data)
                    localStorage.setItem('tokenTime',new Date().getTime())
                    isLogin()
                        .then(loginRes=>{
                            if (loginRes.status == 200 && loginRes.data.code == 2000) {
                                localStorage.setItem('companyInfo',JSON.stringify(loginRes.data.is_login))
                                setTimeout(() => {
                                    this.$router.push({path:'/'})
                                }, 2000);
                            }else{
                                alert("请求错误!")
                            }
                        })
                        .catch(err=>{
                            console.log(err);
                        })
                } else {
                    alert(res.data.msg)
                }
            }).catch(err => {
                alert(err)
                console.log(err);
            })
        }
    },
    beforeDestroy(){
        this.islogin=false
    }
}
</script>

<style lang="less" scoped>
input::-ms-clear {
    display: none !important;
}
input,
select,
textarea,
button {
    vertical-align: middle;
    outline: none;
    border: 0;
}
input {
    border-radius: 0;
    box-shadow: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    -webkit-appearance: none;
}
textarea {
    -webkit-appearance: none;
    overflow-y: auto;
    overflow-x: hidden;
    resize: none;
}
.login{
    width:100vw;
    height: 100vh;
    background-image: url('../../../static/images/aaa/login_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    img.login_gif{
        position: absolute;
        right:0%;
        bottom: 3%;
    }
    .login_box {
        width: 60vh;
        height: 60vh;
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        background-color: #fff;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 5vh 5vw;
        .login_logo {
            // height: 15vh;
            text-align: center;
            .login_title {
                font-size: 30px;
            }
            .login_sub_title {
                font-size: 13px;
                color: #666;
            }
        }
        form {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            input {
                height: 5vh;
                border-bottom: 1px solid #ccc;
                // margin: 5px;
                color: #666;
                margin:2vh 0;
                font-size: 20px;
            }
            input[type="submit"] {
                text-align: center;
                background-color: #4c81ef;
                color: #fff;
                height: 5vh;
                line-height: 5vh;
                border-bottom: none;
                border-radius: 5vh;
                margin-top: 5vh;
            }
        }
    }
    .login_success_tip{
        background-color: rgba(0, 0, 0, 0.8);
        color: #FFF;
        width:20vw;
        height: 15vh;
        line-height: 15vh;
        font-size: 20px;
        text-align: center;
        border-radius: 15px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
    }
    .login_footer{
        position: fixed;
        bottom: 5vh;
        left: 6%;
        font-size: 20px;
        color: #fff;
        a{
            text-decoration: none;
            color: #2965b1;
        }
    }
}
</style>